<template>
    <div class="main">
        <div style="width: calc(100% - 20px); height: 100%; margin: 0 auto; position: relative;">
            <div style="height: 60px;">
                <div style="width: 300px; float: left;">
                    <hu-select-dict v-model="datasourceId" :selectDic="datasorceList" title="数据源" search />
                </div>
                <div style="width: 300px; float: left;">
                    <hu-input v-model="tableName" title="表名称" />
                </div>
                <div class="top-button">
                    <hu-button @click="catchInfo()" value="获取" size="big" />&nbsp;&nbsp;
                    <hu-button v-if="tableInfo.value.length > 0" @click="deleteTableDataSimple()" value="删除表数据"
                        size="big" />&nbsp;&nbsp;
                    <hu-button v-if="tableInfo.value.length > 0" @click="deleteTableDataPrimary()" value="删除主键数据及关联外键数据"
                        size="big" />
                </div>
            </div>
            <hu-table ref="table" v-model="tIndex" :tableInfo="tableInfo" height-reduce="60px" option-width="160" notOption
                checkbox>
            </hu-table>
            <hu-dialog title="过滤SQL" top="15%" ref="filterSQLDialogOpen" width="650px" submit="获取脚本"
                @hu-dialog="filterSQLDialog">
                <div style="height: 35vh;margin-bottom: 7px;">
                    <hu-editor v-model="filterSQL" :mode="editorMode"></hu-editor>
                </div>
            </hu-dialog>
            <hu-dialog title="SQL" top="15%" ref="sqlDataDialogOpen" width="60vw" submit="确认" @hu-dialog="sqlDataDialog">
                <div style="height: 55vh;margin-bottom: 7px;">
                    <hu-editor v-model="sqlData" :mode="editorMode"></hu-editor>
                </div>
            </hu-dialog>
        </div>
        <div v-if="loading" style="width: 100%;height: 150px; position: relative;">
            <hu-loading type="circular" />
        </div>
    </div>
</template>
<script>
import "@/assets/styles/base.scss"
import { selectDataSourceList } from '@/api/datasource'
import { selectBaseInfoList } from '@/api/base'
import { deleteTableDataOfSimple, deleteTableDataOfPrimary } from '@/api/dataopt/delete'
import { isEmpty } from '@/utils/validate'
export default {
    name: '删除表数据',
    components: {

    },
    mixins: [],
    props: [

    ],
    data() {
        return {
            buttonType: 'simple',
            editorMode: 'sql',
            filterSQL: null,
            sqlData: null,
            datasourceId: null,
            tableName: null,
            tableType: 'BASE TABLE',
            loading: true,
            tIndex: [],
            tableInfo: {
                title: [
                    {
                        value: 'tableSchema',
                        label: '库名',
                        width: '280'
                    }, {
                        value: 'tableName',
                        label: '表名',
                        width: '310'
                    }, {
                        value: 'tableType',
                        label: '表类型',
                        width: '150'
                    }
                    , {
                        value: 'tableComment',
                        label: '表注释',
                        width: '340'
                    },
                ],
                value: []
            },
            datasorceList: [],
            characterSetList: [],
            collateList: []
        }
    },
    computed: {

    },
    created() {

    },
    mounted() {
        this.selectDataSourceList();
        this.selectList()
    },
    watch: {

    },
    methods: {
        // 获取数据源字典
        selectDataSourceList() {
            selectDataSourceList().then((res) => {
                let list = res.data.data
                let arr = []
                for (let item of list) {
                    let obj = {
                        value: item.id,
                        label: item.name
                    }
                    arr.push(obj)
                }
                this.datasorceList = arr
            }).catch((error) => {
                this.$huTip({ type: "error", value: error })
            })
        },
        selectList() {
            this.loading = false
        },
        // 获取按钮
        catchInfo() {
            if (this.datasourceId == null) {
                this.$huTip({ type: 'warning', value: "请选择数据源" })
            } else {
                this.loading = true
                selectBaseInfoList(this.datasourceId, this.tableName, this.tableType).then((res) => {
                    this.loading = false
                    this.tableInfo.value = res.data.data
                }).catch((error => {
                    this.loading = false
                    this.$huTip({ type: 'error', value: error })
                }))
            }
        },
        // 按钮点击检验
        validOnClick() {
            if (isEmpty(this.tIndex)) {
                this.$huTip({ type: 'warning', value: "至少选择一条数据" })
                return false
            }
            if (isEmpty(this.datasourceId)) {
                this.$huTip({ type: 'warning', value: "请选择数据源" })
                return false
            }
            return true
        },
        // 简单删除表数据选择删除模式
        deleteTableDataSimple() {
            if (!this.validOnClick()) {
                return
            }
            this.$huConfirm(
                {
                    title: "选择",
                    content: "是否编写以 where 开头的过滤SQL, 删除表数据？",
                    confirmText: "编写过滤是SQL",
                    cancelText: "直接获取脚本",
                    onConfirm: () => {
                        this.buttonType = 'simple'
                        this.$refs.filterSQLDialogOpen.openDialog()
                    },
                    onCancel: () => {
                        let body = {}
                        body.tableNames = this.getTableNameWithIndex()
                        body.filterSql = null
                        deleteTableDataOfSimple(body).then((res) => {
                            this.sqlData = res.data.data
                            this.$refs.sqlDataDialogOpen.openDialog()
                        }).catch((error) => {
                            this.$huTip({ type: 'error', value: error })
                        })
                    }
                }
            )
        },
        // 简单删除表数据过滤SQL
        filterSQLDialog(val) {
            if (!val) {
                this.clearFilterSQL()
                return
            } else {
                let body = {}
                body.tableNames = this.getTableNameWithIndex()
                body.filterSql = this.filterSQL
                if (this.buttonType === 'simple') {
                    deleteTableDataOfSimple(body).then((res) => {
                        
                        this.sqlData = res.data.data
                        this.$refs.sqlDataDialogOpen.openDialog()
                    }).catch((error) => {
                        this.$huTip({ type: 'error', value: error })
                    })
                } else if (this.buttonType === 'primary') {
                    body.datasourceId = this.datasourceId
                    deleteTableDataOfPrimary(body).then((res) => {
                        this.$refs.filterSQLDialogOpen.closeDialog()
                        this.sqlData = res.data.data
                        this.$refs.sqlDataDialogOpen.openDialog()
                    }).catch((error) => {
                        this.$huTip({ type: 'error', value: error })
                    })
                } else {
                    this.$huTip({ type: 'warning', value: 'buttonType 匹配失败' })
                }
            }
        },
        // 删除主键数据执行判断
        deleteTableDataPrimary() {
            if (!this.validOnClick()) {
                return
            }
            this.$huConfirm(
                {
                    title: "选择（删除主键）",
                    content: "是否编写以 where 开头的过滤SQL, 删除表数据？",
                    confirmText: "编写过滤是SQL",
                    cancelText: "直接获取脚本",
                    onConfirm: () => {
                        this.buttonType = 'primary'
                        this.$refs.filterSQLDialogOpen.openDialog()
                    },
                    onCancel: () => {
                        let body = {}
                        body.datasourceId = this.datasourceId
                        body.tableNames = this.getTableNameWithIndex()
                        body.filterSql = null
                        deleteTableDataOfPrimary(body).then((res) => {
                            this.sqlData = res.data.data
                            this.$refs.sqlDataDialogOpen.openDialog()
                        }).catch((error) => {
                            this.$huTip({ type: 'error', value: error })
                        })
                    }
                }
            )
        },
        sqlDataDialog(val) {
            if (!val) {
                this.clearFilterSQL()
                return
            }
        },
        // 根据选中的行获取表名集合
        getTableNameWithIndex() {
            let tableName = []
            for (let index of this.tIndex) {
                tableName.push(this.tableInfo.value[index].tableName)
            }
            return tableName
        },
        // 清空过滤函数
        clearFilterSQL() {
            this.filterSQL = ''
        },
    },
}
</script>
<style lang="scss" scoped>
.main {
    box-sizing: unset;
    position: relative;
}

.top-button {
    float: left;
    margin-top: 18px;
    margin-left: 10px;
}

.column-box {
    width: 90%;
    margin: 0 auto;

    &-item {
        width: 50%;
        float: left;
    }
}
</style>